<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>非单文件组件的基本使用</title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="root">
			<hello></hello>
			<hr >
			<div >
				{{msg}}
			</div>
			<hr >
			<!-- <h2>学校名称:{{schoolName}}</h2>
			<h2>学校地址:{{address}}</h2> -->
			<!-- 第三步 编写组件标签 -->
			<xuxiao></xuxiao>
			<hr>
			<!-- <h2>学生名称:{{studentName}}</h2>
			<h2>学生年龄:{{age}}</h2> -->
			<!-- 第三步 编写组件标签 -->
			<xusheng></xusheng>
			<!-- 互用，只写一遍组件 两边组件标签 -->
			<xusheng></xusheng>
		</div>
		
		<div id="root2">
			<hello></hello>
		</div>
		<script type="text/javascript">
			
			// 1、创建组件
			// 2、注册组件
			// 3、使用组件
			
			// 创建school组件
			const school = Vue.extend({
				template:`
					<div>
						<h2>学校名称:{{schoolName}}</h2>
						<h2>学校地址:{{address}}</h2>
						<button type="button" @click='showName'>点我提示学校名</button>
					</div>
				`,
				// 组件定义时，一定不要写el配置项，最终所有组件都要被一个vm管理，由vm决定服务于哪个容器
				// el:'#root',
				// data 要写成函数式
				data(){
					return{
						schoolName:'尚硅谷',
						address:'北京',
					};
				},
				methods:{
					showName(){
						alert(this.schoolName);
					}
				}
			});
			
			// 创建student组件
			const student = Vue.extend({
				template:`
					<div>
						<h2>学生名称:{{studentName}}</h2>
						<h2>学生年龄:{{age}}</h2>
					</div>
				`,
				// 组件定义时，一定不要写el配置项，最终所有组件都要被一个vm管理，由vm决定服务于哪个容器
				// el:'#root',
				// data 要写成函数式
				data(){
					return{
						studentName:'老王',
						age:22,
					};
				},
			});
			
			const hello = Vue.extend({
				template:`
					<div>
						<h2>你好啊！{{name}}</h2>
					</div>
				`,
				data(){
					return{
						name:'Tom',
					}
				}
			})
			
			// 第二步 全局注册组件
			Vue.component('hello',hello)
			// 创建vm
			new Vue({
				el:'#root',
				data:{
					msg:'你好啊'
				},
				// 新的配置项 组件
				// 第二步 注册组件(局部注册)
				components:{
					xuxiao:school,
					xusheng:student
				}
				// data:{
				// 	schoolName:'尚硅谷',
				// 	address:'北京',
				// 	studentName:'老王',
				// 	age:'22',
				// }
			})
			
			new Vue({
				el:'#root2',
			})
		</script>
	</body>
</html>
